<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求1：点击按钮，显示按钮的文本，显示一个新的输入框
        需求2：遍历输出数组中所有元素值
        需求3：去掉"  my atguigu  "两端的空格 
        */

        //需求1：点击按钮，显示按钮的文本，显示一个新的输入框
        $(function(){
            //绑定文档加载完成的监听
            var $btn1=$("#btn1");
            console.log($btn1);
            //点击按钮，显示按钮的文本，显示一个新的输入框
            $btn1.click(function(){
                console.log(this);
                console.log($btn1);
                //this和$btn有两种不同的文本输出办法。this引用的是属性，$btn引用的是办法
                console.log(this.innerHTML);
                console.log($btn1.html());
 
                //参数为HTML标签字符串（用得少）：创建标签对象饼封装成jQuery对象
                $("<input type='text' name='msg3'><br>").appendTo("div");
                $("<button>新按钮</button><br>").appendTo("div");
                //把被封装成jQuery对象的内容插入到搜寻到的标签的内容尾部
            })

            //需求2：遍历输出数组中所有元素值（尝试把功能定义到按钮上）
            var $btn2=$("#btn2");
            var arr=[1,2,3,4,5,6,7,8]
            $btn2.click(function(){
                $.each(arr,function(index,number){
                   console.log("Item#"+index+":"+number); 
                })
            })

            //需求3：去掉"  my atguigu  "两端的空格（尝试把功能定义到按钮上）
            var $btn3=$("#btn3");
            var str="  my atguigu  ";
            $btn3.click(function(){
                console.log("---"+str1.trim()+"---");
            })
        })

        //遍历输出数组中所有元素值-原始版
        var arr2=[1,2,3,4,5];
        $.each(arr2,function(index,number){
            console.log("Item:"+index+":"+number);
        })

        //去掉"  my atguigu  "两端的空格
        var str1="  my atguigu  ";
        console.log("---"+str1+"---");
        console.log("---"+str1.trim()+"---");
    </script>
</head>
<body>
    <!--
        1.作为一般函数调用：$(param)
            参数为函数：当DOM加载完成后，执行此回调函数
            参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
            参数为DOM对象：将DOM对象封装成jQuery对象
            参数为HTML标签字符串（用得少）：创建标签对象饼封装成jQuery对象
        2.作为对象使用：$.xxx()
            $.aech()：隐式遍历数组
            $.trim()：去除两端的空格    
    -->
    <div>
        <button id="btn1">测试1</button>
        <button id="btn2">测试2</button>
        <button id="btn3">测试3</button>
        <br>
        <input type="text" name="msg1">
        <br>
        <input type="text" name="msg2">
        <br>
    </div>
</body>
</html>